<template>
  <!-- 访客管理 -->
  <div class="top">

    <div class="input1">
      <el-input v-model="obj.idorname" placeholder="请输入访客名称" />
    </div>

    <div class="input1">
      <el-input v-model="obj.mobile" placeholder="请输入手机号" />
    </div>

    <div class="input1">
      <el-select v-model="value" placeholder="请选择人员类型">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>

    <div class="input1">
      <el-select v-model="value1" placeholder="是否离校">
        <el-option v-for="item in opt" :key="item.value1" :label='item.label' :value='item.value1' />
      </el-select>
    </div>

    <div class="input1">
      <el-select v-model="value2" placeholder="请选择审核状态">
        <el-option v-for="item in state" :key="item.value2" :label='item.label' :value='item.value2' />
      </el-select>
    </div>

    <!-- 级联选择器 -->
    <el-cascader style="width: 160px;margin-right: 10px;" :options="options2" placeholder="选择部门"/>

    <!-- 日期选择器 -->

      <el-date-picker class="picker" v-model="value4" type="datetime" placeholder="进校时间" />

      <el-date-picker class="picker" v-model="value5" type="datetime" placeholder="出校时间" />
    
  </div>

  <!-- 按钮 -->
  <div class="botton">

    <div class="head_cen">
        <el-button type="primary" @click="chaxun">查询</el-button>
        <el-button type="success" @click="tianjia">添加</el-button>
        <el-button type="info" @click="daochu">导出</el-button>
        <el-button type="warning">导入</el-button>
      </div>
  </div>


    <!-- 表格 -->
    <el-table ref="multipleTableRef" :data="tableData1" style="width: 100%" border height="540" @selection-change="handleSelectionChange">
      <el-table-column align="center" label="用户名" property="username" width="120" />
      <el-table-column align="center" property="mobile" label="手机号" width="120" />
      <el-table-column align="center" property="department" label="部门" />
      <el-table-column align="center" property="starttime" label="进校时间" />
      <el-table-column align="center" property="endtime" label="离校时间" />
      <el-table-column align="center" property="typename" label="人员类型" />

      <el-table-column align="center" label="状态">
        <template #default="scope">
          <!-- <el-tag>     第一种写法 没有颜色
            {{ scope.row.status===1?"一审":(scope.row.status===2?"二审":"终审")}}
          </el-tag> -->

          <el-tag v-if="scope.row.status===1">
            {{ scope.row.status===1?"一审":''}}
          </el-tag>
          <el-tag type="success" v-else-if="scope.row.status===2">
            {{scope.row.status===2? '二审':''}}
          </el-tag>
          <el-tag type="info" v-else="scope.row.status===3">
            {{scope.row.status===3? '终审':''}}
          </el-tag>
          
        </template>
      </el-table-column>

      <el-table-column align="center" label="是否离校">
        <template #default="scope">
          {{ scope.row.type===1?"否":"是"}}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <!-- <el-button type="danger" >删除</el-button> -->
          <el-button type="info" @click="vxiangqing(scope.row.v_id)">详情</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <FenYe :total="totals" @getChildData='getChildData'></FenYe>



</template>

<script setup lang='ts'>
import { ref,reactive, onMounted } from 'vue'
import { List } from '../../api/login/index' //接口
import FenYe from '../../components/fen ye/FenYe.vue'
import router from "../../router/router";// 路由跳转
import * as XLSX from "xlsx";  // 导出文件
import { table } from 'console';
import { tabBarProps } from 'element-plus';


// 下拉框 请选择人员类型
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: '外来人员'
  },
  {
    value: 'Option2',
    label: '老师'
  },
  {
    value: 'Option3',
    label: '学生'
  }
]
// console.log(value);


// 下拉框 是否离校
let value1 = ref('')
let opt = [
  {
    value1: 'Option1',
    label: '已离校'
  },
  {
    value1: 'Option2',
    label: '未离校'
  }
]

// 下拉框 审核状态
let value2 = ref('')
let state = [
  {
    value2: 'Option1',
    label: '已取消'
  },
  {
    value2: 'Option2',
    label: '待初审'
  },
  {
    value2: 'Option3',
    label: '初审拒绝'
  },
  {
    value2: 'Option4',
    label: '待二审'
  },
  {
    value2: 'Option5',
    label: '二审拒绝'
  },
  {
    value2: 'Option6',
    label: '待终审'
  },
  {
    value2: 'Option7',
    label: '终审通过'
  }
]

// 级联选择器
let value3:any = ref('')
const options2 = [
  {
    value: 'guide',
    label: '京管保卫处'
  },
  {
    value: 'component',
    label: '京管校本部',
    children: [
      {
        value: 'basic',
        label: '学生招办',
        children: [
          {
            value: 'layout',
            label: '西楼',
          }
        ],
      },
      {
        value: 'form',
        label: '学生处',
        children: [
          {
            value: 'radio',
            label: '教育处',
          }
        ],
      },
      {
        value: 'data',
        label: '123'
      },
      {
        value: 'notice',
        label: '总务处'
      },
      {
        value: 'navigation',
        label: '工程部'
      },
      {
        value: 'others',
        label: '教务处'
      },
    ],
  },
  {
    value: 'resource',
    label: '合作单位',
    children: [
      {
        value: 'axure',
        label: '乐宁教育',
        children: [
          {
            value: 'layo',
            label: '老胖洗浴中心',
          }
        ],
      },
      {
        value: 'sketch',
        label: '中科青云',
      },
      {
        value: 'docs',
        label: '临川国际',
      },
      {
        value: 'docs2',
        label: '临川国际',
      },
      {
        value: 'docs3',
        label: '蓝基因',
      },
      {
        value: 'docs4',
        label: '北大青鸟',
      },
      {
        value: 'docs5',
        label: '航空培训',
      },
    ],
  },
]

// 日期选择器
const value4 = ref('')  //进校时间
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const shortcuts = [
  {
    text: 'Today',
    value: new Date()
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    }
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    }
  }
]

const value5 = ref('') //出校时间


// 表格
// 接口 列表数据
let tableData1:any = reactive([])
let totals =ref(0)  // 一共多少条数据
const obj = reactive({  //参数
  page: '1',
  pageSize: '10',
  idorname: '',
  mobile:''
})

let getList = async () => {
  let res :any = await List(obj)
  console.log(res);
  // 防止往下追加
  tableData1.length = 0
  tableData1.push(...res.data)
  // 一共多少条数据
  totals.value = res.total
}
getList() //调用接口


// 查询
let chaxun = () =>{
  getList() //调用接口
}


// 分页
const getChildData = (val:any) => {
  console.log(111, val)
  obj.page = val.page
  obj.pageSize = val.pageSize
  getList()
}



// 列表 点击获取到id
let multipleSelection:any = ref([])
const handleSelectionChange = (val: any) => {
  // 处理数据 获取到选中的id
  multipleSelection.value = val.map((item:any) => item.v_id)
  console.log(multipleSelection.value)
}


// 点击详情
let vxiangqing =(data:any) =>{
  // console.log(data);
  router.push({path:'vxiangqing', query: {data}})
}

// 添加
let tianjia = () =>{
  router.push('vtianjia')
}


// 导出
let daochu = () =>{
  // 1.创建工作表
  let data = XLSX.utils.json_to_sheet(tableData1)
  // 2.创建工作簿
  let wb = XLSX.utils.book_new()
  // 3.把工作表放到工作簿中
  XLSX.utils.book_append_sheet(wb,data,"data")
  // 4.生成文件并下载
  XLSX.writeFile(wb,'访客管理.xlsx')
}


</script>

<style scoped lang='less'>
.top {
  width: 100%;
  height: 40px;
  // background-color: antiquewhite;
  display: flex;
}

.input1 {
  width: 150px;
  margin-right: 10px;
}
.picker{
  width: 100px;
  margin-right: 10px;
}
.head_cen{
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0;
}
</style>